<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    div,
    span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
    }
    
    div.mini {
        width: 30px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
    }
    
    div.visible {
        display: none;
    }
    </style>
    <!--引入jquery的js库-->
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>

<body>
    <h1>XXXX</h1>
    <h2>XXXXXXX</h2>
    <h3>XXXXXXXXX</h3>
    <input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1" />
    <input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2" />
    <input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3" />
    <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4" />
    <div class="one">
        <div id="one" class="one">
            XXXXXXXXX one
        </div>
        <div id="two" class="one">
            XXXXXXXXX two
        </div>
        <div id="three" class="one">
            XXXXXXXXX three
        </div>
        <div id="four" class="one">
            XXXXXXXXX four
        </div>
    </div>
    <div class="one">
        <div id="one" class="one">
            XXXXXXXXX one
        </div>
    </div>
</body>
<script language="JavaScript">
//****每个class为one的div父元素下的第2个子元素
$("#b1").click(function() {
    $("div .one:nth-child(2)").css("background", "red");
});
//*****每个class为one的div父元素下的第一个子元素
$("#b2").click(function() {
    //$("div .one:nth-child(1)").css("background","red");
    $("div .one:first-child").css("background", "red");
});

//*****每个class为one的div父元素下的最后一个子元素
$("#b3").click(function() {
    $("div .one:last-child").css("background", "red");
});

//**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#b4").click(function() {
    $("div .one:only-child").css("background", "red");
    //$("div .one:nth-child(odd)").css("background", "red");
});
</script>

</html>
